<template>
	<view>
		<NavBar title="个人信息" backTo="prev"></NavBar>
		
		<view class="avatar" :style="{marginTop: navBarHeight+'px' }">
			<img class="img" :src="avatarUrl" />
		</view>
		
		<view class="cell">
			<view class="container">
				<view class="left">头像：</view>
				<button class="btn" open-type="chooseAvatar" @chooseavatar="onChooseavatar">更换头像</button>
			</view>
		</view>
		
		<view class="cell">
			<view class="container">
				<view class="left">姓名：</view>
				<input class="input" :value="true_name" @input="handleInputName"/>
			</view>
		</view>
		
		<view class="cell">
			<view class="container">
				<view class="left">开发ID：</view>
				<input class="input" disabled="true" :placeholder="openid"/>
			</view>
		</view>
		
		<view class="cell">
			<view class="container">
				<view class="left">性别：</view>
				<picker mode="selector" class="picker" @change="handleChange" :range="genderRange">
					<view class="val">
						{{gender}}
					</view>
				</picker>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {Request, getGlobalData} from '@/util.js';
	import NavBar from '@/components/NavBar.vue';
	const domain = getGlobalData('domain');
	const openid = uni.getStorageSync('openid');
	
	
	export default {
		components:{
			NavBar
		},
		methods:{
			handleInputName(e){
				console.log(e.target.value);
				Request(domain+"/client/user/updateTrueName",{openid:openid, trueName:e.target.value}).then(()=>{
					uni.setStorageSync('true_name',e.target.value);
					this.true_name = e.target.value
				})
			},
			onChooseavatar(e){
				uni.uploadFile({
					url: domain +"/client/image/uploadAvatarToQiNiu",
					filePath: e.detail.avatarUrl,
					name: 'image',
					formData: {
						'openid': openid
					}
				})
				this.avatarUrl = e.detail.avatarUrl
			},
			handleChange(e){
				  let index = e.detail.value;
				  this.gender = this.genderRange[index];
				  Request(domain+"/client/user/updateGender",{openid:openid,gender:index});
			}
		},
		data(){
			return {
				navBarHeight: uni.getStorageSync('navBarHeight'),
				avatarUrl: uni.getStorageSync('avatarUrl') ?? "http://cdn.henrywong01.top/center/default.jpeg",
				true_name: uni.getStorageSync('true_name'),
				openid: uni.getStorageSync('openid'),
				genderRange: ['未知','男','女'],
				gender: uni.getStorageSync('gender'),
			}
		}
	}
</script>

<style lang="less" scoped>
	.avatar{
		
	    display: flex;
	    height:300rpx;
	    align-items: center;
	    justify-content: center;
	    .img{
	        width:110rpx;
	        height:110rpx;
	        border-radius: 10rpx;
	    }
	}
	
	.cell{
	    line-height: 100rpx;
	    border-bottom:1rpx solid #f6f6f6;
	    height: 100rpx;
	   
	    .container{
			
	        margin: 0 auto;
	        width:95%;
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	
	        .picker{
	            color: gray;
	            display: flex;
	            width:80%;
	            height: 100%;
	            text-align: left;
	            .val{
	                width:520rpx;
	               
	            }
	        }
	
	        .left{
	            width:20%;
	            height: 100%;
	        }
	        .input{
	            width:80%;
	            height: 100%;
	            color: gray;
	            text-align: left;
	        }
	
	        .btn{
	            width:190rpx;
	            height:70rpx;
	            line-height: 70rpx;
	            font-size: 30rpx;
	            // border: 1rpx solid #000;
	            margin: 0;
	        }
	    }
	}
</style>